<template>
  <div class="picList">
    <!-- -->
    <el-table ref="filterTable" :data="tableData" style="width: 100%">
      <el-table-column prop="time" label="日期"> </el-table-column>
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column prop="mac" label="地址"> </el-table-column>
      <el-table-column prop="url" label="图片">
        <template slot-scope="scope">
          <img
            :src="scope.row.url"
            @click="bigPic(scope.row.url)"
            class="picture"
          />
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="8"
        layout="prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="600"  append-to-body>
      <img
        :src="dialogImageUrl"
        :style="{transform:'rotate('+angle+'deg)' }"
        style="display: block; max-width: 100%; margin: 0 auto"
      />
      <!-- <div>旋转</div> -->
    </el-dialog>
  </div>
</template>

<script>
import { getPicturePage } from '@/api/device'
export default {
  name: 'SevencolorUserIndex',

  data () {
    return {
      params: {
        current: 1,
        pageSize: 5
      },
      tableData: [],
      dialogVisible: false,
      dialogImageUrl: '',
      total: 0,
      currentPage: 1,
      angle: 0
    }
  },

  mounted () {
    this.getPicture()
  },

  methods: {
    async getPicture () {
      const res = await getPicturePage(this.params)
      console.log(res)
      this.tableData = res.data.records
      this.total = res.data.total
    },
    bigPic (url) {
      console.log(url)
      this.dialogImageUrl = url
      this.dialogVisible = true
    },
    handleCurrentChange (val) {
      this.params.current = val
      this.getPicture()
    }
  }
}
</script>
<style scoped lang="scss">
.picList {
  width: 80vw;
  background-color: #fff;
  height: 40vw;
  border-radius: 15px;
  padding: 1.0417vw;
}
.picture {
  width: 1rem;
  height: 1rem;
}
.pagination {
  text-align: center;
  position: absolute;
  bottom: 10%;
  left: 50%;
}
</style>
